<template>
   <div class="details" v-if="paramInfo">
     <!-- <x-header>{{paramInfo.name || '打卡'}} <router-link to="/" slot="right"> <a class="fa fa-home fa-15x"></a> </router-link></x-header> -->
     <!-- <ul>
       <li class="item">
         <div class="name">当前位置：</div>
         <div class="cotent">
           {{formInfo.clockPosition}}
           <Icon type="download" @click.native="getPlace"></Icon>
         </div>
       </li>
       <li class="item">
         <div class="name">修正位置：</div>
         <div class="cotent">
           <x-input v-model="formInfo.correctPosition" autocomplete="new-password"></x-input>
         </div>
       </li>
       <li class="item">
         <div class="name">时间：</div>
         <div class="cotent">
           {{timeStr}}
         </div>
       </li>
       <li class="item">
         <x-button type="primary" @click.native="punch">点击打卡</x-button>
       </li>
     </ul> -->
     <!-- <div class="footer">
      <table>
        <tr>
          <th>打卡位置</th>
          <th style="width: 70px;">打卡时间</th>
          <th style="width: 30px;">操作</th>
        </tr>
        <template v-if="tableData.length>0">
          <tr v-for="(item,index) in tableData" :key="item.id">
            <td>{{item.clockPosition}}</td>
            <td>{{item.clockTime}}</td>
            <td>
              <Icon type="clear" @click.native="del(item.id)"></Icon>
            </td>
          </tr>
        </template>
        <template v-else>
          <tr>
            <td colspan="3" style="padding: 20px;">暂无数据</td>
          </tr>
        </template>
      </table>
     </div> -->
      <div class="punch-btn" @click="punch">
        <div class="">重新打卡</div>
      </div>
      <div v-for="(item,index) in tableData" :key="item.id" class="punch-clock">
        <div class="punch-li">
          <div class="title">打卡时间</div>
          <div class="con">{{item.clockTime}}</div>
        </div>
        <div class="punch-li">
          <div class="title">打卡位置</div>
          <div class="con">{{item.clockPosition}}<Icon type="clear" @click.native="del(item.id)"></Icon></div>
        </div>
      </div>
   </div>
  </template>
  <script>
  import Vue from "vue"
  import setting from "@/setting"
  import { Icon,XInput, XButton} from 'vux'
  export default {
    name: "punchList",
    data() {
      return {
	   paramInfo: null,
	   formInfo:{
		 serialNumber: '',
		 clockPosition: '贵州省贵阳市',
		 correctPosition: '',
		 locationType: '银行'
	   },
	   timeStr: '',
     tableData: [],
	   pageSize: 20,
	   currentSize: 2,
	   total: 0
      }
    },
    components: {
      Icon,XInput, XButton
    },
    mounted() {
    },
	created () {
		this.paramInfo = this.$route.query
		this.formInfo.serialNumber = this.paramInfo.taskId
		this.getDate()
    this.getData()
	},
	computed: {

	},
    methods: {
		getDate () {
			   var str = ''
			    var date = new Date();
			    var year = date.getFullYear()
			    var month = date.getMonth() + 1
				if (month<10) {
					month = '0' + month
				}
			    var dates = date.getDate()
				if (dates<10) {
					dates = '0' + dates
				}
			    var day = date.getDay()
				var hour = date.getHours()
				if (hour<10) {
					hour = '0' + hour
				}
				var minutes = date.getMinutes()
				if (minutes<10) {
					minutes = '0' + minutes
				}
				var seconds = date.getSeconds()
				if (seconds<10) {
					seconds = '0' + seconds
				}
			  var arr = [ "星期日","星期一","星期二","星期三","星期四","星期五","星期六"]
				str = `${year}-${month}-${dates} ${hour}:${minutes}:${seconds}  ${arr[day]}`
				this.timeStr = str
				setTimeout(()=>{
					this.getDate()
				},1000)
		},
	   getPlace () {
           console.log('获取地址')
	   },
     del (id) {
       this.baseService.postForm(`${this.__ctx}/plugin/address/deleteAddress`,{id:id})
       .then(res => {
          if (res.isOk) {
            Vue.tools.toast('删除成功',"success")
       			this.getData()
       	  } else {
           Vue.tools.toast(res.msg,"info")
          }
       }).catch(err=>{
          Vue.tools.toast(err.message,"warning")
       })
     },
      punch () {
		   let param = {
			 "serialNumber":this.formInfo.serialNumber,
			 "clockPosition":this.formInfo.clockPosition,
			 "correctPosition":this.formInfo.correctPosition,
			 "locationType": this.formInfo.locationType
		   }
		   this.baseService.post(this.__ctx + '/plugin/address/addAddress',param)
		   .then(res => {
		      if (res.isOk) {
            Vue.tools.toast('打卡成功',"success")
				   this.getData()
		   	  }
		   })
	   },
     getData () {
       let param = {
       "serialNumber":this.formInfo.serialNumber,
       "offset": 0,
       "limit": 1000
       }
       this.baseService.postForm(this.__ctx + '/plugin/address/query',param)
       .then(res => {
          if (res.isOk) {
       				this.tableData = res.rows
       	  }
       })
     }
    }
  }
  </script>
  <style lang="less" scoped>
	 .details{
     padding: 10px 0; 
      .punch-btn{
        width: 147px;
        height: 147px;
        border-radius: 50%;
        background: linear-gradient(360deg, #FF454A 0%, #FFB689 100%);
        box-shadow: 0px 4px 16px 0px rgba(255,82,62,0.15);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 10px auto;
        div{
          font-size: 20px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #FFFFFF;
        }
      }
      .punch-clock{
        padding: 10px 0;
        margin: 0 1em;
        border-bottom: 1px solid #E5E6EB;
        &:last-child{
          border: 0;
        }
        .punch-li{
          display: flex;
          font-size: 14px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          .title{
            color: #86909C;
            margin-right: 10px;
          }
          .con{
            color: #1D2129;
            flex: 1;
          }
        }
      }





	   .item{
	     padding: 10px;
	     border-bottom: 1px solid #ddd;
	     align-items: center;
	     display: flex;
       position: relative;
	     &:last-child{
	       border-bottom:none
	     }
	     >div{
	       display: inline-block;
	       vertical-align: middle;
	     }
	     .name{
	       width: 100px;
	     }
       .cotent{
         width: calc(~'100% - 120px');
         word-break: break-all;
       }
	   }
     /deep/ .weui_icon_download{
             position: absolute;
             right: 0;
             bottom: 0;
             font-size: 24px;
             color: #09BB07;
           }
     .footer{
        padding: 10px;
        table{
          width: 100%;
          table-layout: fixed;
          th,td{
            padding: 5px;
            word-break: break-all;
            text-align: center;
            .weui_icon_clear {
              font-size: 20px;
            }
          }
          th{
            background-color: #ddd;
          }
        }
     }
	 }
  </style>
